<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索题库" v-model="searchKeyword" @input="searchQuestionBanks" />
			</view>
		</view>
		
		<!-- 分类选择 -->
		<view class="category-tabs">
			<scroll-view scroll-x="true" class="category-scroll">
				<view 
					class="category-item" 
					v-for="(item, index) in categories" 
					:key="index"
					:class="{'active': currentCategory === item.id}"
					@click="switchCategory(item.id)"
				>
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-bar">
			<view 
				class="filter-item" 
				v-for="(item, index) in filters" 
				:key="index"
				@click="showFilterOptions(index)"
			>
				<text>{{item.label}}</text>
				<text class="iconfont icon-down"></text>
			</view>
		</view>
		
		<!-- 题库列表 -->
		<view class="question-bank-list">
			<view class="question-bank-item" v-for="(item, index) in filteredBanks" :key="index" @click="openQuestionBank(item)">
				<view class="bank-header">
					<text class="bank-title">{{item.title}}</text>
					<text class="bank-tag" v-if="item.isHot">热门</text>
				</view>
				<view class="bank-info">
					<text class="bank-desc">{{item.description}}</text>
					<view class="bank-stats">
						<text class="stat-item">
							<text class="iconfont icon-question"></text>
							<text>{{item.questionCount}}题</text>
						</text>
						<text class="stat-item">
							<text class="iconfont icon-user"></text>
							<text>{{item.userCount}}人做过</text>
						</text>
					</view>
				</view>
				<view class="bank-tags">
					<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
				</view>
				<view class="bank-footer">
					<text class="bank-time">更新时间：{{item.updateTime}}</text>
					<text class="bank-btn">开始做题</text>
				</view>
			</view>
		</view>
		
		<!-- 无数据提示 -->
		<view class="empty-tip" v-if="filteredBanks.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无相关题库</text>
		</view>
		
		<!-- 筛选弹出层 -->
		<view class="filter-popup" v-if="showFilter" @click="hideFilterOptions">
			<view class="filter-options" @click.stop>
				<view 
					class="filter-option-item" 
					v-for="(option, index) in currentFilterOptions" 
					:key="index"
					:class="{'active': option.selected}"
					@click="selectFilterOption(option)"
				>
					{{option.label}}
				</view>
				<view class="filter-actions">
					<text class="reset-btn" @click="resetFilter">重置</text>
					<text class="confirm-btn" @click="confirmFilter">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 'all',
				categories: [
					{ id: 'all', name: '全部' },
					{ id: 'gwy', name: '公务员' },
					{ id: 'sydw', name: '事业单位' },
					{ id: 'jszg', name: '教师资格' },
					{ id: 'gzs', name: '公职类' },
					{ id: 'ky', name: '考研' },
					{ id: 'zyjn', name: '职业技能' }
				],
				filters: [
					{
						label: '地区',
						options: [
							{ label: '全部', value: 'all', selected: true },
							{ label: '国家', value: 'national', selected: false },
							{ label: '北京', value: 'beijing', selected: false },
							{ label: '上海', value: 'shanghai', selected: false },
							{ label: '广东', value: 'guangdong', selected: false },
							{ label: '江苏', value: 'jiangsu', selected: false },
							{ label: '浙江', value: 'zhejiang', selected: false }
						]
					},
					{
						label: '年份',
						options: [
							{ label: '全部', value: 'all', selected: true },
							{ label: '2025', value: '2025', selected: false },
							{ label: '2024', value: '2024', selected: false },
							{ label: '2023', value: '2023', selected: false },
							{ label: '2022', value: '2022', selected: false },
							{ label: '2021', value: '2021', selected: false }
						]
					},
					{
						label: '难度',
						options: [
							{ label: '全部', value: 'all', selected: true },
							{ label: '简单', value: 'easy', selected: false },
							{ label: '中等', value: 'medium', selected: false },
							{ label: '困难', value: 'hard', selected: false }
						]
					}
				],
				showFilter: false,
				currentFilterIndex: -1,
				currentFilterOptions: [],
				questionBanks: [
					{
						id: 1,
						title: '2025年国家公务员考试行测真题',
						description: '包含2025年国考行政能力测验真题及解析',
						questionCount: 100,
						userCount: 5280,
						tags: ['国考', '行测', '2025'],
						updateTime: '2025-08-30',
						isHot: true,
						category: 'gwy',
						region: 'national',
						year: '2025',
						difficulty: 'medium'
					},
					{
						id: 2,
						title: '2025年北京市公务员考试行测真题',
						description: '包含2025年北京市考行政能力测验真题及解析',
						questionCount: 90,
						userCount: 3150,
						tags: ['北京', '行测', '2025'],
						updateTime: '2025-08-28',
						isHot: true,
						category: 'gwy',
						region: 'beijing',
						year: '2025',
						difficulty: 'hard'
					},
					{
						id: 3,
						title: '2025年事业单位公共基础知识真题',
						description: '包含2025年全国事业单位考试公共基础知识真题及解析',
						questionCount: 120,
						userCount: 4280,
						tags: ['事业单位', '公基', '2025'],
						updateTime: '2025-08-25',
						isHot: true,
						category: 'sydw',
						region: 'national',
						year: '2025',
						difficulty: 'medium'
					},
					{
						id: 4,
						title: '2025年教师资格证考试真题',
						description: '包含2025年教师资格证考试真题及解析',
						questionCount: 150,
						userCount: 3780,
						tags: ['教资', '教育知识', '2025'],
						updateTime: '2025-08-20',
						isHot: true,
						category: 'jszg',
						region: 'national',
						year: '2025',
						difficulty: 'medium'
					},
					{
						id: 5,
						title: '2024年国家公务员考试行测真题',
						description: '包含2024年国考行政能力测验真题及解析',
						questionCount: 100,
						userCount: 8560,
						tags: ['国考', '行测', '2024'],
						updateTime: '2024-08-30',
						isHot: false,
						category: 'gwy',
						region: 'national',
						year: '2024',
						difficulty: 'medium'
					},
					{
						id: 6,
						title: '2024年上海市事业单位考试真题',
						description: '包含2024年上海市事业单位考试真题及解析',
						questionCount: 110,
						userCount: 2980,
						tags: ['上海', '事业单位', '2024'],
						updateTime: '2024-09-15',
						isHot: false,
						category: 'sydw',
						region: 'shanghai',
						year: '2024',
						difficulty: 'hard'
					},
					{
						id: 7,
						title: '公务员考试行测常见题型精选',
						description: '精选公务员考试行测各类题型，包含数量关系、言语理解、判断推理等',
						questionCount: 200,
						userCount: 6350,
						tags: ['行测', '题型', '精选'],
						updateTime: '2025-08-10',
						isHot: false,
						category: 'gwy',
						region: 'all',
						year: 'all',
						difficulty: 'easy'
					},
					{
						id: 8,
						title: '事业单位考试公基高频考点',
						description: '汇总事业单位考试公共基础知识高频考点及例题',
						questionCount: 180,
						userCount: 5120,
						tags: ['事业单位', '公基', '高频'],
						updateTime: '2025-08-05',
						isHot: false,
						category: 'sydw',
						region: 'all',
						year: 'all',
						difficulty: 'medium'
					}
				]
			}
		},
		computed: {
			filteredBanks() {
				let result = this.questionBanks;
				
				// 分类筛选
				if (this.currentCategory !== 'all') {
					result = result.filter(item => item.category === this.currentCategory);
				}
				
				// 关键词搜索
				if (this.searchKeyword) {
					const keyword = this.searchKeyword.toLowerCase();
					result = result.filter(item => 
						item.title.toLowerCase().includes(keyword) || 
						item.description.toLowerCase().includes(keyword) ||
						item.tags.some(tag => tag.toLowerCase().includes(keyword))
					);
				}
				
				// 筛选条件
				// 地区筛选
				const regionFilter = this.filters[0].options.find(opt => opt.selected);
				if (regionFilter && regionFilter.value !== 'all') {
					result = result.filter(item => item.region === regionFilter.value);
				}
				
				// 年份筛选
				const yearFilter = this.filters[1].options.find(opt => opt.selected);
				if (yearFilter && yearFilter.value !== 'all') {
					result = result.filter(item => item.year === yearFilter.value);
				}
				
				// 难度筛选
				const difficultyFilter = this.filters[2].options.find(opt => opt.selected);
				if (difficultyFilter && difficultyFilter.value !== 'all') {
					result = result.filter(item => item.difficulty === difficultyFilter.value);
				}
				
				return result;
			}
		},
		methods: {
			switchCategory(categoryId) {
				this.currentCategory = categoryId;
			},
			searchQuestionBanks() {
				// 搜索逻辑已在计算属性中实现
			},
			showFilterOptions(index) {
				this.currentFilterIndex = index;
				this.currentFilterOptions = [...this.filters[index].options];
				this.showFilter = true;
			},
			hideFilterOptions() {
				this.showFilter = false;
			},
			selectFilterOption(option) {
				// 单选模式
				this.currentFilterOptions.forEach(opt => {
					opt.selected = (opt.value === option.value);
				});
			},
			resetFilter() {
				this.currentFilterOptions.forEach(opt => {
					opt.selected = (opt.value === 'all');
				});
			},
			confirmFilter() {
				// 更新筛选条件
				this.filters[this.currentFilterIndex].options = [...this.currentFilterOptions];
				this.hideFilterOptions();
			},
			openQuestionBank(item) {
				uni.navigateTo({
					url: `/pages/shanganbao/detail/detail?type=bank&id=${item.id}`
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 搜索栏 */
	.search-bar {
		background-color: #1296db;
		padding: 10px 15px;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 20px;
		padding: 6px 12px;
	}
	
	.search-box .iconfont {
		font-size: 16px;
		color: #999;
		margin-right: 5px;
	}
	
	.search-box input {
		flex: 1;
		font-size: 14px;
		color: #333;
	}
	
	/* 分类选择 */
	.category-tabs {
		background-color: #FFFFFF;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.category-scroll {
		white-space: nowrap;
	}
	
	.category-item {
		display: inline-block;
		padding: 5px 15px;
		margin: 0 5px;
		font-size: 14px;
		color: #666;
		border-radius: 15px;
	}
	
	.category-item.active {
		color: #1296db;
		background-color: rgba(18, 150, 219, 0.1);
	}
	
	/* 筛选条件 */
	.filter-bar {
		display: flex;
		background-color: #FFFFFF;
		padding: 10px 15px;
		margin-bottom: 10px;
	}
	
	.filter-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
	}
	
	.filter-item .iconfont {
		font-size: 12px;
		margin-left: 5px;
	}
	
	/* 题库列表 */
	.question-bank-list {
		padding: 0 15px;
	}
	
	.question-bank-item {
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}
	
	.bank-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.bank-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	
	.bank-tag {
		font-size: 12px;
		color: #FFFFFF;
		background-color: #ff6b6b;
		padding: 2px 8px;
		border-radius: 10px;
	}
	
	.bank-info {
		margin-bottom: 10px;
	}
	
	.bank-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		margin-bottom: 10px;
	}
	
	.bank-stats {
		display: flex;
	}
	
	.stat-item {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #999;
		margin-right: 15px;
	}
	
	.stat-item .iconfont {
		font-size: 14px;
		margin-right: 3px;
	}
	
	.bank-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.tag {
		font-size: 12px;
		color: #1296db;
		background-color: rgba(18, 150, 219, 0.1);
		padding: 2px 8px;
		border-radius: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	
	.bank-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.bank-time {
		font-size: 12px;
		color: #999;
	}
	
	.bank-btn {
		font-size: 14px;
		color: #FFFFFF;
		background-color: #1296db;
		padding: 5px 15px;
		border-radius: 15px;
	}
	
	/* 无数据提示 */
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50px 0;
	}
	
	.empty-tip image {
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}
	
	.empty-tip text {
		font-size: 14px;
		color: #999;
	}
	
	/* 筛选弹出层 */
	.filter-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		flex-direction: column;
	}
	
	.filter-options {
		background-color: #FFFFFF;
		padding: 15px;
		border-radius: 10px 10px 0 0;
		margin-top: auto;
	}
	
	.filter-option-item {
		padding: 12px 0;
		font-size: 14px;
		color: #333;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.filter-option-item.active {
		color: #1296db;
	}
	
	.filter-actions {
		display: flex;
		margin-top: 15px;
	}
	
	.reset-btn, .confirm-btn {
		flex: 1;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		border-radius: 20px;
	}
	
	.reset-btn {
		color: #666;
		background-color: #f5f5f5;
		margin-right: 10px;
	}
	
	.confirm-btn {
		color: #FFFFFF;
		background-color: #1296db;
	}
</style>